import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import './parkingInfo.less';
import http from "../../model/http";
import { SearchBar, Toast, List, Button, Modal, Tabs, InputItem, Radio } from 'antd-mobile'
import Header from "../../components/header/Header";
import LicenseKeyboard from "vehicle-plate-keyboard";
import "vehicle-plate-keyboard/dist/main.css";

function ParkingInfo(){
    const history = useHistory();
    const [searchVal,setSearchVal] = useState('')
    const [showKeyboard, setShowKeyboard] = useState(false)
    const [valArr, setValArr] = useState([])
    const [phoneValue, setPhoneValue] = useState('')
    const [phoneValueError, setPhoneValueError] = useState(false)
    const [checkVal, setCheckVal] = useState(2)
    useEffect(async () => {
          
    }, [])
    const keyBoardClick = () => {
        setShowKeyboard(true)
    }

    const keyBoardChange = (value) => { 
        setSearchVal(value)
        let arr = value.split('')
        console.log(arr) 
        setValArr([...arr])
    }

    const removeVal = (index) => {
        let arr = valArr.slice(0, index)
        setValArr([...arr])

        let stringVal = arr.toString()
        console.log(stringVal)
        setSearchVal(stringVal.replace(/,/g, ''))
    }

    const phoneChange = (value) => {
        setPhoneValue(value) 
        setPhoneValueError(false)
    }
    const phoneBlur = (value) => { 
        if (value.replace(/\s/g, '').length < 11) {
            setPhoneValueError(true)
        }else{
            setPhoneValueError(false)
        } 
    }

    const submitClick = () => { 
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ 
        if (searchVal == '') { Toast.fail('请先输入车牌号'); return };  
        if (phoneValue == '') { Toast.fail('请先输入顾客手机号'); return };  
        let phoneNumber = phoneValue.replace(/\D/g, '')
        if(!reg.test(phoneNumber)){ Toast.fail('请输入正确的手机号'); return false} 


        Modal.alert('提示', '是否发放停车券', [
            { text: '取消' },
            {
              text: '确认', onPress: async () => { 
                
                const result = await http.post('/park/pushCarPark',{
                    mobile: phoneNumber,
                    car_no: searchVal,
                    type: checkVal,
                })
                if(result.code == 0){
                    Toast.success(result.msg) 
                    setValArr([])
                    setSearchVal('')
                    setPhoneValue('')
                    setPhoneValueError(false)
                }else{
                    Toast.fail(result.msg)
                }
              }
            }
        ])
    }
    
    return (
        <div className="v-parking-info"> 
            <div onClick={() => keyBoardClick()} className="hearder-card-box"> 
                <h1>请输入完整车牌</h1>
                <div className="number-text-box">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li>
                            <span className="tags">新能源</span>
                        </li>
                    </ul>
                    <div className="postion-li-box">
                        <ul>
                            {valArr.map((item,index) => (
                                <li className={index+1 == valArr.length && 'li-active'} onClick={() => removeVal(index)}>
                                    {item}
                                    {index+1 == valArr.length && (<span></span>)} 
                                </li>
                            ))} 
                        </ul>    
                    </div>
                </div>
                
            </div>
            <LicenseKeyboard
                visible={showKeyboard}
                onChange={value => keyBoardChange(value)}
                value={searchVal}
                done={() => setShowKeyboard(false)}
                confirmButtonText='收起'
                confirmButtonStyle={{textAlign:'right',position:'absolute',right:'14px',color:'#3092ff',fontSize:'14px'}} 
            />
            
            
            <div className="input-box">
                <List>
                    <InputItem
                        type="phone"
                        placeholder="请输入顾客手机号" 
                        error={phoneValueError}
                        onBlur={(value) => phoneBlur(value)}
                        onChange={(value) => phoneChange(value)}
                        value={phoneValue}
                    >顾客手机号</InputItem>
                </List>

                <div className="box-footer-input">
                    <p>人员类型</p>
                    <div className="small-box">
                        <div className="check-time-box" onClick={() => setCheckVal(2)}>
                            <span>员工</span>
                            <Radio className="my-radio" checked={checkVal == 2}></Radio>
                        </div>
                        <div className="check-time-box" onClick={() => setCheckVal(1)}>
                            <span>顾客</span>
                            <Radio className="my-radio" checked={checkVal == 1}></Radio>
                        </div>
                        <div className="check-time-box" onClick={() => setCheckVal(3)}>
                            <span>非顾客</span>
                            <Radio className="my-radio" checked={checkVal == 3}></Radio>
                        </div>
                    </div>
                </div>
            </div>
            

            <Button type="primary" className="btn-style" onClick={() => submitClick()}>发放停车券</Button>

            <div className="explain-style">
                <h1>功能说明</h1>
                <div className="text-box">
                    <p>1、输入顾客完整车牌号</p>
                    <p>2、输入顾客手机号</p>
                    <p>3、选择人员类型</p>
                    <p>4、发放停车券，顾客出示停车券出停车场</p>
                </div>
            </div>

            <Header />
        </div>
    );
}
export default ParkingInfo;